<script setup lang="ts">
import {ref} from 'vue';
import {getTreeList} from "@/mock";

const options = ref([
  {
    label: '植物界',
    value: 'plantae',
    children: [
      {
        label: '被子植物',
        value: 'angiosperms',
        children: [
          {
            label: '单子叶植物',
            value: 'monocots'
          },
          {
            label: '双子叶植物',
            value: 'dicots'
          }
        ]
      },
      {
        label: '裸子植物',
        value: 'gymnosperms',
        children: [
          {
            label: '松科',
            value: 'pinaceae'
          },
          {
            label: '柏科',
            value: 'cupressaceae'
          }
        ]
      },
      {
        label: '蕨类植物',
        value: 'ferns',
        children: [
          {
            label: '水龙骨科',
            value: 'polypodiaceae'
          },
          {
            label: '蹄盖蕨科',
            value: 'dryopteridaceae'
          }
        ]
      }
    ]
  },
  {
    label: '动物界',
    value: 'animalia',
    children: [
      {
        label: '哺乳动物',
        value: 'mammals',
        children: [
          {
            label: '食肉目',
            value: 'carnivores'
          },
          {
            label: '偶蹄目',
            value: 'artiodactyla'
          }
        ]
      },
      {
        label: '鸟类',
        value: 'birds',
        children: [
          {
            label: '猛禽',
            value: 'raptors'
          },
          {
            label: '鸣禽',
            value: 'oscine'
          }
        ]
      },
      {
        label: '爬行动物',
        value: 'reptiles',
        children: [
          {
            label: '蜥蜴',
            value: 'lizards'
          },
          {
            label: '蛇',
            value: 'snakes'
          }
        ]
      }
    ]
  }
]);

const chooseOen = ref([]);

const chooseOenLast = ref('');
</script>

<template>
  <h3>接口获取options+绑定所有路径的值</h3>
  {{ chooseOen }}
  <dev-cascader v-model="chooseOen" :api="getTreeList" use-api/>

  <h3>自定义options+只要最后一级选中的值</h3>
  {{ chooseOenLast }}
  <dev-cascader v-model="chooseOenLast" :options="options" :props="{emitPath:false}"/>
</template>
